<template>
  <div class="common-layout">
    <el-container>
      <el-aside :width="openMenuif ? '220px' : '64px'">
        <div class="openMenudiv" @click="toggleMenu">
           <el-icon color="#ffffff" v-if="openMenuif"><ArrowLeftBold /></el-icon>
          <el-icon color="#ffffff" v-else><ArrowRightBold /></el-icon>
         

        </div>
        <el-row v-show="openMenuif">
          <el-col :span="8"> <img src="../img/Logo2.png" id="logo" /></el-col>
          <el-col :span="12"
            ><span>环游塑形社</span><span class="Tr">Global Slimming Club</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <Treemenu :openMenuif="openMenuif"></Treemenu
          ></el-col>
        </el-row>
      </el-aside>
      <el-container>
        <el-header>
          <el-row>
            <el-col :span="18">
              <el-input
                v-model="input1"
                style="width: 240px"
                size="large"
                placeholder="Please Input"
                :suffix-icon="Search"
            /></el-col>
            <el-col :span="6" class="button-col"
              ><el-avatar
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                :size="35"
              /><el-button @click="loginOut">退出</el-button></el-col
            >
          </el-row>
        </el-header>
        <!-- 路由入口 -->
        <el-main><router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import Treemenu from "../components/menu.vue";
import { useRouter } from "vue-router";
import { Search } from "@element-plus/icons-vue";
import { ref } from "vue";
const router = useRouter();
const loginOut = () => {
  window.sessionStorage.clear();
  router.push("/login");
};
const openMenuif = ref(true);

const toggleMenu = () => {
  openMenuif.value = !openMenuif.value;
};
</script>
<style scoped >
.common-layout {
  height: 100%;
}

.el-container {
  height: 100%;
}

.el-header {
  align-items: center; /* 垂直居中 */
  height: 100%; /* 确保高度占满父容器 */
  background-color: #ffffff;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.el-header .el-row {
  height: 100%;
  align-items: center;
}

.el-header .el-row .el-input {
  margin-left: 50px;
}

.el-header .el-row .button-col {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.el-header .el-row .el-avatar {
  margin-right: 10px;
  size: 35px;
}

.el-aside {
  background-color: #030946;
}

.el-aside span {
  font-weight: bold;
  color: #ffffff;
}

.el-aside .Tr {
  font-size: 10px;
}

.el-aside .el-row {
  display: flex;
  justify-content: center;
  justify-items: center;
  text-align: center;
}

.el-aside .el-col {
  display: flex;
  flex-direction: column; /* 垂直排列 */
  justify-content: center; /* 垂直居中 */
  align-items: center;
}
.openMenudiv {
  display: flex;
  justify-content: right;
  justify-items: right;
  margin-top: 20px;
  margin-right:24px;
}
#logo {
  margin-top: 20px;
  width: 120px;
}

.el-main {
  background-color: #f4f8fb;
}
</style>
